<template>
<el-page-header @click="goback">
    <template #content>
      <span class="text-large font-600 mr-3">评分项目重审</span>
    </template>
  </el-page-header>
  <el-descriptions
    class="margin-top"
    style="
      border-radius: 10px;
      margin: 20px auto;
      width: 73%;
      box-shadow: 5px 5px 10px rgba(51, 126, 204, 0.5);
    "
    :column="3"
    size="large"
    border
  >
    <el-descriptions-item label-class-name="my-label" class-name="my-content">
      <template #label>
        <div class="cell-item">
          <el-icon :style="iconStyle">
            <user />
          </el-icon>
          员工姓名
        </div>
      </template>
      {{ empName }}
    </el-descriptions-item>
    <el-descriptions-item label-class-name="my-label" class-name="my-content">
      <template #label>
        <div class="cell-item">
          <el-icon :style="iconStyle">
            <iphone />
          </el-icon>
          所属部门
        </div>
      </template>
      {{ deptName }}
    </el-descriptions-item>
    <el-descriptions-item label-class-name="my-label" class-name="my-content">
      <template #label>
        <div class="cell-item">
          <el-icon :style="iconStyle">
            <tickets />
          </el-icon>
          岗位
        </div>
      </template>
      {{ position }}
    </el-descriptions-item>
  </el-descriptions>
  <el-table
    :data="tableData"
    border
    style="
      width: 80%;
      margin: 20px auto;
      border-radius: 8px;
      margin: 20px auto;
      box-shadow: 5px 5px 10px rgba(64, 158, 255, 0.5);
    "
    :header-cell-style="{
      background: '#337ecc !important',
      color: '#ffffff',
      border: 'none !important',
    }"
	
	:span-method="(value) => rowSpanRulesHandler(value, tableData)"
  >
    
	
	<el-table-column prop="type" label="考核条目类型" />
	<el-table-column prop="target" label="考核条目" width="" />
	<el-table-column prop="scorePercent" label="考核条目占比%" width="140">
		<template #default="scope">
					{{scope.row.scorePercent}}%
			</template>
	</el-table-column>
		
	<el-table-column prop="assessorName" label="评分人" width="140"/>
	<el-table-column prop="assessorPercent" label="评分人占比%" width="140">
		<template #default="scope">
					{{scope.row.assessorPercent}}%
			</template>
	</el-table-column>
	<el-table-column prop="score" label="评分" width="140"/>
	<el-table-column prop="grade" label="考核得分" width=""/>
	<el-table-column prop="remark" label="评分说明" width=""/>
	
  </el-table>
  
  
  <div style="text-align: right;margin-right: 200px;margin-bottom: 20px;">总计：{{total}}分</div>
  <div></div>
  <el-button type="primary" @click="submitForm" class="button" >审批通过</el-button>
</template>

<script setup>
import { ref, onBeforeMount, reactive, getCurrentInstance,watch} from "vue";
import {getOneEmpScore} from "@/api/empScore"
import { useRoute } from 'vue-router'
import { ElMessage } from 'element-plus'
import {addBackScore} from '@/api/resultThird'

const route = useRoute();
let empId = route.query.empId;
let deptName = route.query.deptName
let empName = route.query.empName;
let position = route.query.position;

const tableData = ref();
const total = ref(0);

onBeforeMount(()=>{
let empId=route.query.empId;
let positionId = route.query.positionId;
    getOneEmpScore({empId,positionId})
    .then(data=>{
		
		let item = data.data
		
		for(var i = 0;i <item.length;i++){
			item[i].grade = (Number(item[i].score)* Number(item[i].scorePercent)/100 * Number(item[i].assessorPercent)/100).toFixed(2) ;
			
		}
		
        tableData.value=item;
		
        for (let item of tableData.value) {
        let x = parseFloat(((((Number(item.score) * Number(item.scorePercent)) / 100) *Number(item.assessorPercent)) /100).toFixed(2));
        total.value += x;
      }
	  
	  total.value = total.value.toFixed(2)
    });
})

const { proxy } = getCurrentInstance();
const goback=()=>{
  proxy.$router.go(-1)
}

const submitForm = () => {
	let assessorId = JSON.parse(localStorage.getItem("userInfo")).id;
	let empId=route.query.empId;
	let positionId = route.query.positionId;
	let positionType=route.query.type
	addBackScore({empId, assessorId, positionId, positionType})
	.then((data) => {
      if (data.code == 200) {
        ElMessage({
          message: "提交成功",
          type: "success",
        });
        goback()
      } else {
        ElMessage.error("提交成功");
      }
    }
  );
};



const compareSingleAttrReturnColSpan = (row, compareAttr, index, tableData) => {
  let count = 0;
    let start = index;
  
    while (start < tableData.length) {
    	
    		
    	if(start > index &&compareAttr==="scorePercent"&&row["target"] !== tableData[start]["target"]){
    		break
    	}else{
    		// 进入循环，检查下一个元素
    		if (start > index && row[compareAttr] !== tableData[start][compareAttr]) {
    			break;  // 如果不相等，则停止合并
    		}
    		count++;  // 计数相同的行
    		start++;  // 移动到下一行
    	}
    	
      
    }
  
    // 将合并的行数存储在行数据中
    if (start > index) {
      tableData[index][`${compareAttr}_count`] = count;
    }
  
    // 检查前一行的合并数量与当前行是否相等
    const previousRowCount = index > 0 ? tableData[index - 1][`${compareAttr}_count`] : 0;
    return previousRowCount === count + 1 ? [0, 0] : [count, 1];
};

const columns = [
  "type",
  "target",
  "scorePercent",
  "assessorName",
  "assessorPercent",
  "score",
  "grade",
  "remark"
];
const rowSpanRulesHandler = ({  row, column, rowIndex, columnIndex }, data) => {
  //console.log(columns[columnIndex]);
 // 根据列名判断进行合并
   if (columns[columnIndex] === "type") {
     return compareSingleAttrReturnColSpan(row, "type", rowIndex, data);
   } else if (columns[columnIndex] === "target") {
     return compareSingleAttrReturnColSpan(row, "target", rowIndex, data);
   } else if (columns[columnIndex] === "scorePercent") {
     return compareSingleAttrReturnColSpan(row, "scorePercent", rowIndex, data);
   }
};




</script>
<style lang="scss" scoped>
.el-card {
  border-radius: 10px;
  margin: 20px auto;
}
:deep(.my-label) {
  background: rgba(51, 126, 204, 0.2) !important;
  color: rgb(51, 126, 204) !important;
  border: #337ecc 2px solid !important ;
}
:deep(.my-content) {
  color: #fff !important;
  background: rgba(51, 126, 204, 0.9) !important;
  border: #337ecc 2px solid !important ;
}
.button {
  width: 120px;
  height: 40px;
  margin: 10px 130px;
  float: right;
}
</style>
